<template>
    <div className="basic-form" class="basic-form">
        <basic-container>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="简历姓名" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>

                <el-form-item label="手机号" required prop="mobile">
                    <el-input v-model="ruleForm.mobile"></el-input>
                </el-form-item>
                <el-form-item label="电子邮件" required prop="email">
                    <el-input v-model="ruleForm.email" type="email"></el-input>
                </el-form-item>
                <el-row justify="start">
                    <el-col :span="12">
                        <el-form-item label="性别" prop="gender">
                            <el-switch
                                v-model="ruleForm.gender"
                                inactive-color="#409EFF"
                                active-color="#ff4949"
                                inactive-value="0"
                                inactive-text="男"
                                active-text="女"
                                active-value="1"
                            >
                            </el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否共享" prop="ifshare">
                            <el-switch
                                v-model="ruleForm.ifshare"
                                inactive-color="#999999"
                                active-color="#409EFF"
                                inactive-value="0"
                                inactive-text="不共享"
                                active-text="共享"
                                active-value="1"
                            >
                            </el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="期望行业" prop="area">
                            <el-select v-model="ruleForm.area" placeholder="请选择">
                                <el-option
                                        v-for="item in areas"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="期望职位" required prop="position">
                            <el-select v-model="ruleForm.position" placeholder="请选择">
                                <el-option
                                        v-for="item in positions"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="期望城市" prop="city">
                            <el-input v-model="ruleForm.city"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="人才描述">
                    <el-input type="textarea" clearable :autosize="{ minRows: 6, maxRows: 8}"  v-model="ruleForm.avatar" maxlength="400" placeholder="如果暂无简历，请添加人才描述！"></el-input>
                </el-form-item>
                <el-form-item label="附件简历">
                    <el-upload
                        class="upload-demo"
                        drag
                        :action="Config.baseUrl+'/api/resume/file'"
                        :on-success="fileSuccess"
                        :on-error="fileError"
                        :on-progress="fileLoading"
                        :limit='1'
                    >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传PDF,DOC,DOCX文件，且不超过5MB</div>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </basic-container>
    </div>
</template>

<script>
    import BasicContainer from "@vue-materials/basic-container";
    import Config from "@myconfig/config.min.js";

    export default {
        components: {BasicContainer},
        name: "BasicForm",

        data() {
            var checkPhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error("手机号不能为空"));
                }
                // setTimeout(() => {
                var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
                if (!phoneReg.test(value)) {
                    callback(new Error("请输入11位正确的手机号！"));
                }
                else {
                    callback();
                }

                // }, 1000);
            };
            var checkEmail = (rule, value, callback) => {
                let mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
                if (!value) {
                    return callback(new Error('邮箱不能为空'))
                }

                if (!mailReg.test(value)) {
                    callback(new Error('请输入正确的邮箱格式'))
                }
                else {
                    callback();
                }
            };
            return {
                Config: Config,
                ruleForm: {
                    name: "",
                    mobile: "",
                    gender: "male",
                    ifshare: "",
                    email: "",
                    liveCity: "",
                    area: "",
                    city: "",
                    position: "",
                    filePath: "",
                    avatar: ""
                },
                areas: ["地产商业", "制造业", "消费及健康业", "金融业", "高科技互联网","综合集团"],
                positions: ["财务金融", "生产制造", "营销市场", "人力管理", "高层管理"],
                rules: {
                    name: [
                        {required: true, message: "请输入名字", trigger: "blur"},
                        {min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur"}
                    ],
                    mobile: [{validator: checkPhone, trigger: "blur"}],
                    email: [{validator: checkEmail, trigger: "blur"}],
                    area: [{ required: true, message: "请输入期望行业", trigger: "blur" }],
                    // city: [{ required: true, message: "请输入目标城市", trigger: "blur" }],
                    position: [{required: true, message: "请输入期望职位", trigger: "blur"},
                        {min: 1, max: 12, message: "长度在 1 到 12 个字符", trigger: "blur"}],
                }
            };
        },
        methods: {
            fileSuccess(response, file, fileList) {
                console.log("====================================");
                console.log(response);
                console.log(file, fileList);
                console.log("====================================");
                if (response.code == 1) {
                    this.ruleForm.filePath = response.data;
                    this.$message({
                        message: "附件简历上传成功",
                        type: "success"
                    });
                } else {
                    this.$message({
                        message: response.message,
                        type: "error"
                    });
                    fileList.pop();
                }
            },
            fileError() {
                this.$message({
                    message: "附件简历上传失败",
                    type: "error"
                });
            },
            fileLoading() {
            },
            doAddPeople() {

            },
            submitForm() {

                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        console.log("1123123");
                        this.$http.post(Config.baseUrl + "/api/resume/add", this.ruleForm).then(
                            function (response) {
                                console.log("====================================");
                                console.log(response);
                                if (response.data.code == 1) {
                                    this.$message({
                                        type: "success",
                                        message: "成功添加简历，即将跳转至我的简历列表"
                                    });
                                    this.$router.push({path: "/myPeople"});
                                } else {
                                    this.$message({
                                        type: "error",
                                        message: response.data.message
                                    });
                                }
                            },
                            function (error) {
                            }
                        );
                    }
                });
                // return
                // this.$confirm("确认添加之后无法编辑, 是否继续?", "提示", {
                //   confirmButtonText: "确定",
                //   cancelButtonText: "取消",
                //   type: "warning"
                // }).then(() => {
                //     // this.$message({
                //     //   type: 'success',
                //     //   message: '删除成功!'
                //     // });
                //     this.doAddPeople()
                //   }).catch((error) => {
                //     console.log(error)
                //
                //   });
                // .then((formName) => {
                //   this.$message({
                //     type: "info",
                //     message: "确认添加"
                //   });
                //   this.doAddPeople(formName)
                //   console.log("confirm");

                // })
                // .catch(() => {
                //   this.$message({
                //     type: "info",
                //     message: "已取消添加"
                //   });
                // });


                // let _this = this;
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    };
</script>

<style lang="scss" scoped>
    .basic-form {
        max-width: 90%;
    }
</style>


